<template>
  <div class="content">
    <div class="left">
      <div class="left-header">XXXX列表</div>
      <div class="left-content">
        <div class="title-header"><span>名称</span><span>显示</span></div>
        <ul>
          <li>
            <el-checkbox label="太阳坐标系" v-model="listChecked"></el-checkbox>
          </li>
          <li>
            <el-checkbox label="轨道坐标系" v-model="listChecked"></el-checkbox>
          </li>
          <li>
            <el-checkbox label="惯性坐标系" v-model="listChecked"></el-checkbox>
          </li>
          <li>
            <el-checkbox label="太阳矢量" v-model="listChecked"></el-checkbox>
          </li>
          <li>
            <el-checkbox label="月亮矢量" v-model="listChecked"></el-checkbox>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="right-header">选项:</div>
      <div class="right-content">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="颜色:">
                <el-color-picker></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="大小:">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="first">
                <el-slider></el-slider>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="箭头:" class="arrow-class">
                <el-select><el-option></el-option></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="透明度:" class="transparent-class"
                ><el-input></el-input
              ></el-form-item> </el-col
            ><el-col :span="6">
              <el-form-item class="left-move"
                ><el-select class="unit-class"
                  ><el-option></el-option></el-select
              ></el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item class="second">
                <el-slider></el-slider>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col>
              <el-form-item class="is-show">
                <el-checkbox>显示标签</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-form-item class="is-show">
            <el-checkbox>显示标签</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listChecked: [],
    };
  },
};
</script>
<style scoped>
.title-words {
  font-weight: bold;
  font-size: 18px;
}
.content {
  display: flex;
  justify-content: flex-start;
}
.left {
  width: 30%;
  margin-left: 34px;
}
.left-header,
.right-header {
  padding-top: 30px;
  height: 60px;
  font-size: 18px;
  font-weight: bold;
}
.title-header {
  display: flex;
  justify-content: space-around;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  background-color: #00758c;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff !important;
}
.right {
  flex: 1;
}
/deep/.el-checkbox {
  color: #fff !important;
  width: 100% !important;
}
/deep/.el-checkbox__input {
  right: -175px !important;
}
li {
  list-style: none;
  padding: 10px;
}
/deep/.el-color-picker__trigger {
  height: 32px !important;
  width: 240px !important;
  border: 1px solid #5889ba !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/deep/ .el-color-picker__color {
  border: 0 !important;
}
/deep/.el-color-picker__icon {
  transform: translate3d(-7%, -50%, 0) !important;
}
/deep/.el-color-picker__empty,
.el-color-picker__icon {
  left: 93% !important;
}
/deep/.el-color-picker__trigger {
  width: 120px !important;
}
/deep/.el-input__inner {
  width: 120px !important;
}
/deep/.el-slider__runway {
  border-radius: 0 !important;
  width: 74px !important;
}
/deep/.el-slider__button {
  border-radius: 0 !important;
  background-color: #00c3d9;
  border: 0;
  width: 8px;
}
/deep/.el-slider__button {
  right: 120px;
}
/deep/.unit-class .el-input__inner {
  width: 60px !important;
  position: relative;
  right: 42px;
}
/deep/.unit-class .el-input__suffix {
  right: 41px !important;
}
/deep/.transparent-class .el-input__inner .el-input__suffix {
  right: 41px !important;
}

/deep/.transparent-class .el-input__inner {
  width: 60px !important;
}
/deep/ .first .el-slider__runway {
  right: 40px !important;
}
/deep/ .second .el-slider__runway {
  right: 128px !important;
}
/deep/.arrow-class .el-input__suffix {
  right: 117px !important;
}
/deep/.is-show .el-checkbox__input {
  right: 0 !important;
}
</style>
